<template>
  <div class="pagination">
    <a class="btn btn-info" :class="{ disabled: currentPage === 1 }" @click="changePage(1)">首页</a>
    <a href="javascript:;" class="btn btn-info" :class="{ disabled: currentPage === 1 }" @click="changePage(currentPage - 1)">上页</a>

    <template v-for="page in pagesToShow" :key="page">
      <a
          :data-page-num="page"
          class="btn btn-warning"
          :class="{ active: currentPage === page }"
          @click="currentPage !== page ? changePage(page) : null"
      >
        {{ page }}
      </a>
    </template>

    <a
        class="btn btn-info"
        :class="{ disabled: currentPage === totalPages }"
        @click="changePage(currentPage + 1)"
    >
      下页
    </a>
    <a
        class="btn btn-info"
        :class="{ disabled: currentPage === totalPages }"
        @click="changePage(totalPages)"
    >
      尾页
    </a>
  </div>
</template>

<script>
export default {
  name: 'PaginationComponent',
  props: {
    total: {
      type: Number,
      required: true,
    },
    pageSize: {
      type: Number,
      default: 10,
    },
    currentPage: {
      type: Number,
      default: 1,
    },
  },
  computed: {
    totalPages() {
      return Math.ceil(this.total / this.pageSize);
    },
    pagesToShow() {
      const pages = [];
      const range = 2; // 当前页前后显示的页数

      // 添加前面的页码
      for (let i = Math.max(1, this.currentPage - range); i < this.currentPage; i++) {
        pages.push(i);
      }

      // 添加当前页
      pages.push(this.currentPage);

      // 添加后面的页码
      for (let i = this.currentPage + 1; i <= Math.min(this.totalPages, this.currentPage + range); i++) {
        pages.push(i);
      }

      // 确保页码不超过总页数
      return pages.filter(page => page > 0 && page <= this.totalPages);
    },
  },
  methods: {
    changePage(page) {
      if (page >= 1 && page <= this.totalPages) {
        this.$emit('change-page', page);
      }
    },
  },
}
</script>


<style scoped>
a {
  text-decoration: none;
  user-select: none;
}

[class^="icon-"],
[class*=" icon-"] {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Reset */
.htmleaf-links a {
  color: rgba(255, 255, 255, 0.6);
  outline: none;
  text-decoration: none;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.htmleaf-links a:hover,
.htmleaf-links a:focus {
  color: #74777b;
  text-decoration: none;
}

.htmleaf-header h1 {
  color: #D5D6E2;
  font-weight: 600;
  font-size: 2em;
  line-height: 1;
  margin-bottom: 0;
}

.htmleaf-header h1 span {
  display: block;
  font-size: 60%;
  font-weight: 400;
  padding: 0.8em 0 0.5em 0;
  color: #c3c8cd;
}

/*nav*/
.htmleaf-demo a {
  color: #fff;
  text-decoration: none;
}

.htmleaf-demo a {
  display: inline-block;
  margin: 0.5em;
  padding: 0.6em 1em;
  border: 3px solid #fff;
  font-weight: 700;
}

.htmleaf-demo a:hover {
  opacity: 0.6;
}

.htmleaf-demo a.current {
  background: #1d7db1;
  color: #fff;
}

.htmleaf-icon span {
  display: none;
}

.related > a {
  vertical-align: top;
  width: calc(100% - 20px);
  max-width: 340px;
  display: inline-block;
  text-align: center;
  margin: 20px 10px;
  padding: 25px;
  font-family: "Microsoft YaHei", "宋体", "Segoe UI", "Lucida Grande", Helvetica, Arial, sans-serif, FreeSans, Arimo;
}

.related a {
  display: inline-block;
  text-align: left;
  margin: 20px auto;
  padding: 10px 20px;
  opacity: 0.8;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  -webkit-backface-visibility: hidden;
  text-decoration: none;
}

.related a:hover,
.related a:active {
  opacity: 1;
}

.related a img {
  max-width: 100%;
  opacity: 0.8;
  border-radius: 4px;
}

.related a:hover img,
.related a:active img {
  opacity: 1;
}

.related h3 {
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 1.2em
}

.related a h3 {
  font-size: 0.85em;
  font-weight: 300;
  margin-top: 0.15em;
  color: #fff;
}

/* icomoon */
.icon-htmleaf-home-outline:before {
  content: "\e5000";
}

.icon-htmleaf-arrow-forward-outline:before {
  content: "\e5001";
}

@media screen and (max-width: 1024px) {
  .htmleaf-header {
    padding: 2em 10% 2em;
  }

  .htmleaf-header h1 {
    font-size: 1.4em;
  }

  .htmleaf-links {
    font-size: 1.4em
  }
}

@media screen and (max-width: 960px) {
  .htmleaf-header {
    padding: 2em 10% 2em;
  }

  .htmleaf-header h1 {
    font-size: 1.2em;
  }

  .htmleaf-links {
    font-size: 1.2em
  }

  .related h3 {
    font-size: 1em;
  }

  .related a h3 {
    font-size: 0.8em;
  }
}

@media screen and (max-width: 766px) {
  .htmleaf-header h1 {
    font-size: 1.3em;
  }

  .htmleaf-links {
    font-size: 1.3em
  }
}

@media screen and (max-width: 640px) {
  .htmleaf-header {
    padding: 2em 10% 2em;
  }

  .htmleaf-header h1 {
    font-size: 1em;
  }

  .htmleaf-links {
    font-size: 1em
  }

  .related h3 {
    font-size: 0.8em;
  }

  .related a h3 {
    font-size: 0.6em;
  }
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.625rem;
  margin-bottom: 0.625rem;
}

.pagination a {
  margin: 1px;
  text-decoration: none;
}

.pagination span {
  height: 36px;
  padding: 5px;
  color: #666;
}

.pagination input[type='text'] {
  width: 80px;
  margin-right: 5px;
  height: 36px;
}

</style>
